<template>
    <el-dialog
        width="1132px"
        class="dialog-box"
        :title="title"
        append-to-body
        :visible="visible"
        @update:visible="(val) => $emit('update:visible', val)"
    >
        <div class="video-box" v-loading="loading" element-loading-text="加载中...">
            <video ref="player" muted autoplay></video>
        </div>
        <div class="operation-box">
            <!-- title -->
            <div class="title-text">
                <span>云台</span>
                <span> （ 仅球机可用 ）</span>
            </div>
            <!-- 9按钮操作 -->
            <div class="operation-btn">
                <div
                    class="btn-box"
                    v-for="(item, index) in monitorList"
                    @click="mouseClick(item, index)"
                    :key="index"
                    :style="
                        valueIndex === index
                            ? { backgroundImage: 'url(' + item.imageActive + ')' }
                            : { backgroundImage: 'url(' + item.image + ')' }
                    "
                ></div>
            </div>
            <!-- 滑块 -->
            <div class="slider-big-box">
                <el-slider class="slider-box" :min="1" :max="100" v-model="speed" />
                <p>{{ speed }}</p>
            </div>
            <!-- 摄像头运动指令 -->
            <div class="head-move-life">
                摄像头运动：
                <div
                    @click="startClick()"
                    :class="action === 0 ? 'start-box-active' : 'start-stop'"
                >
                    开始
                </div>
                <div @click="stopClick()" :class="action === 1 ? 'stop-box-active' : 'start-stop'">
                    暂停
                </div>
            </div>
            <!-- 放大 缩小 -->
            <div class="enlarge-narrow-box">
                <span>变倍</span>
                <div
                    @click="enlargeClick(item)"
                    class="big-box"
                    v-for="(item, index) in bigList"
                    :key="index"
                    :style="{ backgroundImage: 'url(' + item.images + ')' }"
                ></div>
            </div>
        </div>
    </el-dialog>
</template>

<script>
import { Dialog } from "@/component/ElementUi";
import flvjs from "flv.js";
import { FetchGetClouldControlWithFixed, FetchGetClouldControlNoFixed } from "@/api";

export default {
    name: "TableDialog",
    components: {
        ElDialog: Dialog,
    },
    props: {
        visible: {
            type: Boolean,
            default: false,
        },
        src: String,
        title: String,
        cameraIndexCode: String,
    },
    data() {
        return {
            loading: false,
            speed: 50, //摄像头速度
            action: 1, //摄像头指令
            valueIndex: null,
            command: null, //运动指令
            timer: null,
            monitorList: [
                {
                    image: require("@/asset/image/monitor/monitor-left-top.png"),
                    imageActive: require("@/asset/image/monitor/monitor-left-top-light.png"),
                    command: 5,
                },
                {
                    image: require("@/asset/image/monitor/monitor-nice.png"),
                    imageActive: require("@/asset/image/monitor/monitor-nice-top-light.png"),
                    command: 1,
                },
                {
                    image: require("@/asset/image/monitor/monitor-right-top.png"),
                    imageActive: require("@/asset/image/monitor/monitor-right-top-light.png"),
                    command: 6,
                },
                {
                    image: require("@/asset/image/monitor/monitor-nice-left.png"),
                    imageActive: require("@/asset/image/monitor/monitor-left-light.png"),
                    command: 3,
                },
                {
                    image: require("@/asset/image/monitor/monitor-center.png"),
                    imageActive: require("@/asset/image/monitor/monitor-center-light.png"),
                    command: 15,
                },
                {
                    image: require("@/asset/image/monitor/monitor-nice-right.png"),
                    imageActive: require("@/asset/image/monitor/monitor-nice-right-light.png"),
                    command: 4,
                },
                {
                    image: require("@/asset/image/monitor/monitor-left-down.png"),
                    imageActive: require("@/asset/image/monitor/monitor-left-down-light.png"),
                    command: 7,
                },
                {
                    image: require("@/asset/image/monitor/monitor-nice-down.png"),
                    imageActive: require("@/asset/image/monitor/monitor-nice-down-light.png"),
                    command: 2,
                },
                {
                    image: require("@/asset/image/monitor/monitor-right-down.png"),
                    imageActive: require("@/asset/image/monitor/monitor-right-down-light.png"),
                    command: 8,
                },
            ],
            bigList: [
                { images: require("@/asset/image/monitor/enlarge.png"), command: 9 },
                { images: require("@/asset/image/monitor/narrow.png"), command: 10 },
            ],
        };
    },
    watch: {
        src: {
            immediate: true,
            handler(newVal, oldVal) {
                if (oldVal) {
                    this.$_destroy();
                }
                if (newVal) {
                    this.$nextTick(() => {
                        this.$_playVideo();
                    });
                }
            },
        },
        // command: {
        //     handler() {
        //         this.refreshList();
        //     },
        // },
        action: {
            handler() {
                this.refreshList2();
            },
        },
        speed: {
            handler() {
                this.refreshList2();
            },
        },
    },
    created() {
        this.refreshList();
    },
    beforeDestroy() {
        this.$_destroy();
    },
    methods: {
        // 开始
        startClick() {
            if (this.command) {
                this.action = 0;
            } else {
                alert("请先确定运动方向");
            }
        },
        // 停止
        stopClick() {
            this.action = 1;
            this.valueIndex = null;
        },
        mouseClick(item, index) {
            this.command = item.command;
            this.valueIndex = index;
            this.refreshList();
            if (this.command === 15) {
                this.valueIndex = null;
            }
        },
        enlargeClick(item) {
            this.command = item.command;
            this.refreshList();
        },
        $_destroy() {
            if (this.player) {
                this.player.pause();
                this.player.unload();
                this.player.detachMediaElement();
                this.player.destroy();
                this.player = null;
            }
        },
        $_playVideo() {
            let host = "ws://10.200.1.2:8765/rtsp/";
            this.loading = true;
            this.player = flvjs.createPlayer({
                type: "flv",
                isLive: true,
                url: host + `${encodeURIComponent(this.src)}/?url=${encodeURIComponent(this.src)}`,
            });
            this.player.attachMediaElement(this.$refs.player);
            this.player.on(flvjs.Events.METADATA_ARRIVED, () => {
                this.loading = false;
            });
            this.player.load();
            this.player.play();
        },

        // 九键按钮
        async refreshList() {
            FetchGetClouldControlWithFixed({
                cameraIndexCode: this.cameraIndexCode,
                command: this.command,
            }).then(() => {
                // console.log(res, "res1");
            });
        },

        //运动轨迹
        async refreshList2() {
            FetchGetClouldControlNoFixed({
                cameraIndexCode: this.cameraIndexCode,
                action: this.action,
                command: this.command,
                speed: this.speed,
            }).then(() => {
                // console.log(res, "res2");
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.dialog-box {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    // 监控视频
    .video-box {
        width: 80%;
        height: 100%;
        video {
            width: 100%;
            height: 100%;
        }
    }

    // 监控右侧操作烂
    .operation-box {
        width: 20%;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 0 0 8px;
        // 云台（仅球机可用）
        .title-text {
            padding-left: 8px;
            color: #d4ce88;
            font-size: .12rem;
            font-weight: bolder;
            :last-child {
                font-size: .1rem;
                color: #aa5559;
            }
        }

        // 九个按钮
        .operation-btn {
            margin-top: .09rem;
            width: 100%;
            height: 1.15rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
            align-items: center;
            .btn-box {
                width: 26%;
                height: 26%;
                cursor: pointer;
                background: no-repeat center center/100% 100%;
            }
        }
        // 滑块
        .slider-big-box {
            width: 100%;
            height: .18rem;
            margin: 18px 0 0 8px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .slider-box {
                width: 79%;
            }
            p {
                width: .195rem;
                height: .11rem;
                border: 1px solid #00baff;
                color: #00f3f8;
                border-radius: 2px;
                text-align: center;
                line-height: .11rem;
                font-size: .08rem;
            }
        }

        // 运动指令
        .head-move-life {
            width: 100%;
            height: .25rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: .09rem;
            color: #fff;
            .start-stop {
                color: #fff;
                font-size: .1rem;
                cursor: pointer;
            }
            .start-box {
                font-size: .1rem;
                cursor: pointer;
            }
            .start-box:hover {
                font-size: .1rem;
                color: rgba(0, 243, 248, 0.68);
                cursor: pointer;
            }
            .start-box-active {
                font-size: .1rem;
                color: #00f3f8;
                cursor: pointer;
            }
            .stop-box {
                font-size: .1rem;
                cursor: pointer;
            }
            .stop-box:hover {
                color: rgba(255, 34, 34, 0.68);
                font-size: .1rem;
                cursor: pointer;
            }
            .stop-box-active {
                color: #ff2222;
                font-size: .1rem;
                cursor: pointer;
            }
        }
        // 放大 缩小
        .enlarge-narrow-box {
            width: 100%;
            height: .25rem;
            display: flex;
            align-items: center;
            padding-left: 8px;
            font-size: .1rem;
            font-weight: bolder;
            color: #fff;
            .big-box {
                width: .16rem;
                height: .16rem;
                margin: 0 0 0 .16rem;
                cursor: pointer;
                background: no-repeat center center/100% 100%;
            }
        }
    }
}

.dialog-box{
  >>> {
    .el-dialog {
      background:red;
      background: transparent;
    }
    .el-dialog__header {
      background: rgba(30, 40, 128, 0.18);
      border: 3px solid rgba(13, 83, 147, 1);
      border-bottom: 1px solid rgba(13, 83, 147, 1);
      .el-dialog__title {
        color: #fff;
      }
      .el-dialog__headerbtn {
        height: .12rem;
        width: .12rem;
        border: 1px solid rgba(13, 83, 147, 1);
      }
      .el-dialog__close {
        margin: 1px 0 0 0;
        font-size: .1rem;
        font-weight: bolder;
        color: #3fa2f8;
      }
      .el-dialog__close:hover {
        color: #66ccee;
      }
    }
    .el-dialog__body {
      background: rgba(30, 40, 128, 0.18);
      border: 3px solid rgba(13, 83, 147, 1);
      border-top: none;
      display: flex;
      justify-content: space-between;
    }

    // 滑块
    .el-slider__input {
      width: 1.036rem;
    }
    .el-slider__runway.show-input {
      margin-right: 1.18rem;
    }
    .el-slider__runway {
      background: rgba(0, 243, 248, 0.24);
    }
    .el-slider__bar {
      background: #00f3f8;
    }
    //.el-icon-plus{
    //    color: #fff
    //}
    //.el-input-number__decrease{
    //    background: rgba(0, 243, 248, 0.9);
    //    border: 1px solid rgba(0, 243, 248, 0.9);
    //}
    //.el-input-number__increase{
    //    background: rgba(0, 243, 248, 1);
    //    border: 1px solid rgba(0, 243, 248, 0.9);
    //}
    //.el-input-number--small .el-input__inner {
    //    background: rgba(0, 243, 248, 1);
    //    border: 1px solid rgba(0, 243, 248, 0.8);
    //}
  }
}
</style>
